<template>
  <van-tabbar v-model="active" @change="onTabChange" z-index="999" safe-area-inset-bottom>
    <van-tabbar-item icon="home-o" name="main" :badge="0">首页</van-tabbar-item>
    <van-tabbar-item icon="search" name="complaintranking">投诉排行</van-tabbar-item>
    <!-- 修改这里的 icon，例如换成 "edit" -->
    <van-tabbar-item icon="edit" name="complaints">我要投诉</van-tabbar-item>
    <van-tabbar-item icon="warning-o" name="TravelQuery">发现</van-tabbar-item>
    <van-tabbar-item icon="user-o" name="personal">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { ref, watch } from 'vue'

const route = useRoute()
const router = useRouter()
const active = ref(route.name)

watch(
  () => route.name,
  (newName) => {
    active.value = newName
  }
)

const onTabChange = (name) => {
  router.push({ name })
}
</script>

<style scoped>
.van-tab-bar {
  background-color: #fff;
  border-top: 1px solid #eee;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.van-tab-bar-item--active {
  color: #ff9a00;
}
</style>